<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org"
      th:replace="layout/master(title='学生列表')">

<!-- css片段 -->
<th:block th:fragment="css">
    <link rel="stylesheet" href="/css/list.css">
</th:block>


<!-- 内容片段 -->
<div class="container" th:fragment="content">
    <div class="main-title">学生信息表</div>

    <!-- 根据姓名查询   -->
    <form>
        <div class="form-group">
            <label for="InputName">输入名字查询</label>
            <input type="text" class="form-control" id="InputName" placeholder="Name">
            <button type="button" class="btn btn-success" onclick="findByName()">提交</button>
            <a href="http://localhost:8080/student/ajaxlist" class="btn btn-success" >刷新重置</a>
        </div>
    </form>

    <!-- 设计表格 -->
    <table class="table table-striped">
        <thead>
        <tr>
            <th>序号</th>
            <th>学号</th>
            <th>姓名</th>
            <th>密码</th>
            <th>性别</th>
            <th>年龄</th>
            <th>成绩</th>
        </tr>
        </thead>
        <tbody id="students">

        </tbody>
    </table>
</div>


<!-- js片段 -->
<div th:fragment="scripts">
    <script type="text/javascript" src="/pagejs/student/list.js"></script>
    <script>
        <!-- 查询函数 -->
        function findByName(){
            var name = document.getElementById("InputName").value;
            $.ajax({
                url: "/webapi/student/getbyname?name=" + name,
                type:"GET",
                success:function (data) {
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        var sex = "";
                        var item = data[i];
                        html += "<tr id='" + i + "'>";

                        html += "<td>" + item.id + "</td>>";
                        html += "<td>" + item.no + "</td>>";
                        html += "<td class='studentName'>" + item.name + "</td>>";
                        html += "<td>" + item.password + "</td>>";
                        if (item.sex === 1) {
                            sex = "男";
                        } else if (item.sex === 2) {
                            sex = "女";
                        } else {
                            sex = "未知";
                        }
                        html += "<td>" + sex + "</td>>";
                        html += "<td>" + item.age + "</td>>";
                        html += "<td>" + item.score + "</td>>";

                        html += "</tr>";
                    }
                    $("#students").html(html);
                }
            })
        }
    </script>
</div>
